<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            position: relative;
            background-color: pink;
        }
        #wrap{
            
            margin: 50px auto;
            width: 600px;
            height: 500px;
            background-color: pink;
            padding: 10px;
        }
        button{
            background-color: #fff;
            border: 1px solid #000;
            padding: 4px 10px;
            margin: 10px 0;
            outline: none;
        }
        table{
            border-collapse: collapse;
        }
        thead th{
            border: 1px solid #000;
        }
        tbody td{
            border: 1px solid #000;
            text-align: center;
            padding: 0px 30px;
        }
        tbody td button{
            margin: 0 4px;
            padding: 0;
        }

        #addsut{
            background: rgba(255, 255, 255, 0.5);
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
        }
        #box{
            width: 1000px;
            height: 200px;
            background: #fff;
            border: 1px solid #000;
            border-radius: 20px;
            position: absolute;
            top: 0;left: 0;
            right: 0;bottom: 0;
            margin: auto;
            display: flex;
        }
        #_close{
            width: 50px;
            height: 50px;
            position: absolute;
            top: -25px;
            right: -25px;
            border: 1px solid #000;
            border-radius: 50%;
        }
        #box div{
            margin: auto;
        }
    </style>
</head>
<body>
    <section id="wrap">

    </section>
    <section id="addsut">
        <article id="box">
            <button id="_close">关闭</button>
            <div>
                <span>学号</span><input type="text">
                <span>姓名</span><input type="text">
                <span>性别</span><input type="text">
                <span>年龄</span><input type="text">
                <button id="affirm">确定</button>
            </div>
        </article>
    </section>
    <script src="utils.js"></script>
    <script>
        // ## 2.移动表格
        var wrap = document.querySelector('#wrap')
        var addRow = document.createElement('button')
        addRow.innerHTML = '新增一行'
        wrap.appendChild(addRow)
        var tab = document.createElement('table')
        wrap.appendChild(tab)
        var thead = document.createElement('thead')
        tab.appendChild(thead)
        var tbody = document.createElement('tbody')
        tab.appendChild(tbody)

        thead.innerHTML = '<tr><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th><th>操作</th></tr>'
        var arr = [{
            id : 1 ,
            name : '张三',
            sex : '男',
            age : 18,
        },{
            id : 2 ,
            name : '张四',
            sex : '女',
            age : 182,
        },{
            id : 3 ,
            name : '张五',
            sex : '男',
            age : 13,
        },{
            id : 4 ,
            name : '张六',
            sex : '女',
            age : 18,
        },
        ]
       
       
        function conSole (Arr){
            Arr.forEach(function(sut,index){
           var row = document.createElement('tr')
           row.className = 'replace'
            for(var key in sut){
                var col = document.createElement('td')
                col.innerHTML = sut[key]
                row.appendChild(col)
            }
            var topMove = document.createElement('button')
            topMove.innerHTML = '向上移动'
            topMove.className = 'topMove'
            var butMove = document.createElement('button')
            butMove.innerHTML = '向下移动'
            butMove.className = 'butMove'
            var del = document.createElement('button')
            del.innerHTML = '删除'
            del.className = 'del'
            var col = document.createElement('td')
            col.id = 'parentTd'
            col.appendChild(topMove)
            col.appendChild(butMove)
            col.appendChild(del)
            row.appendChild(col)
            tbody.appendChild(row)
        })

        var topMoveBtn = document.querySelectorAll('.topMove')
        var butMoveBtn = document.querySelectorAll('.butMove')
        var delBtn = document.querySelectorAll('.del') 
        var parentTd = document.querySelectorAll('#parentTd')
        var replace = document.querySelectorAll('.replace')

        // var replace = document.createElement('tr')
        // replace.id = 'replace'
        // document.body.appendChild(replace)
     
        
        parentTd.forEach(function(item,index){
            item.addEventListener('click',function(e){
                e = e || window.event
                tbody.firstElementChild.id = ''
                if(e.target.innerHTML === '向上移动'){
                    var a = e.target.parentNode.parentNode
                    var b = e.target.parentNode.parentNode.previousElementSibling
                    tbody.insertBefore(a,b)
                    tbody.firstElementChild.id = 'first'
                    var firstTr = document.querySelector('#first')
                    var fTchild = firstTr.lastElementChild.children
                        if(b.id === 'first'){
                            console.log('11')
                        }
                    
                    // for(var i = 0;i < fTchild.length;i++){
                    //     if(fTchild[i].className === 'topMove'){
                    //         console.log('11')
                    //     }
                    // }
                    
                    // if(a.className == ){

                    // }
                }
                
                if(e.target.innerHTML === '删除'){
                    if(confirm('确定要删除吗')){
                        e.target.parentNode.parentNode.remove() 
                    }
                }
                
            })
           
        })
       
        
        // delBtn.forEach(function(item,index){
        //     item.addEventListener('click',function(e){
              
        //     })
        // })

        }
        conSole(arr)
        

        var addsut = document.querySelector('#addsut')
        var _close = document.querySelector('#_close')
        var affirm = document.querySelector('#affirm')
        var addInput = document.querySelectorAll('input')
        addRow.onclick = function(){
            addsut.style.display = 'block'
        }
        _close.onclick = function(){
            addsut.style.display = 'none'
        }
        var addInputArr = []
        var obj = {
            id : null,
            name : null,
            sex : null,
            age : null,
        }
        affirm.onclick = function(){
            tbody.innerHTML = ''
            var flag;
            for(var i = 0 ; i < addInput.length ;i++){
                if(addInput[i].value){
                    addInputArr.push(addInput[i].value)
                }else{
                    flag = false
                    addInputArr.splice(0,addInput.length)
                    break
                }
                flag = true
            }
            // console.log(addInputArr)
            
            
            if(flag){
                for(var key in obj){
                obj[key] = addInputArr.shift()
                }
                arr.push(obj)
                conSole(arr)
                addInput.forEach(function(item,index){
                    item.value = ''
                })
                addsut.style.display = 'none'
            }else{
                alert('请输入内容')
                conSole(arr)
            }
        }
       
    </script>
</body>
</html>